<template>
	<view>
<!-- 		<view class="top-info">
			
		</view>
 -->
		<!--参与用户排行-->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
			<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100"></me-tabs>
			<view v-if="tabIndex==0">
				<view class="prompt">
					<text>共{{rankinginfo.count}}人参与，好友助力越多，越容易中奖</text>
				</view>
				<view class="my-self" style="border-top: #EAE6DC 2rpx solid;background-color: #FEF7E5;">
					<image class="icon" src="/static/image/icon_redstar.png"></image>
					<image class="avatar" :src="rankinginfo.self.avatar"></image>
					<view class="nickname">
						<text class="name">{{rankinginfo.self.nickname}}</text>
						<text class="info">第{{rankinginfo.self.index}}名</text>
					</view>
					<view class="info1">
						<text class="text-gray">好友助力</text>
						<text style="color: #CD7F7B">{{rankinginfo.self.help_count}}位</text>
					</view>
					<view style="margin: 0 30rpx;height: 55rpx;width: 2rpx;background-color: #D2CEC1;"></view>
					<view class="info1" style="margin-right: 30rpx;">
						<text class="text-gray">中奖率</text>
						<text style="color: #CD7F7B">+{{rankinginfo.self.magnification}}倍</text>
					</view>
				</view>
				<view style="height: 10rpx;background-color: #F1F1F3;border:#EAE6DC 2rpx solid;"></view>
				<view class="content">
					<view class="head">
						<text>排名</text>
						<text style="flex-grow: 1;"></text>
						<text>中奖率</text>
					</view>
					<view class="my-self" style="background-color: #FFF;" v-for="(item,index) in partInRanking" :key="index">
						<image class="icon" v-if="index<=2" :src="'/static/image/ttylranking'+index+'.png'"></image>
						<text class="icontext" v-else>{{index+1}}</text>
						<image class="avatar" :src="item.avatar"></image>
						<view class="nickname">
							<text class="name">{{item.nickname}}</text>
							<text class="info">第{{index+1}}名</text>
						</view>
						<view class="info1" style="margin-right: 30rpx;">
							<text style="color: #CD7F7B">+{{item.magnification}}倍</text>
						</view>
					</view>
				</view>
			</view>

			<view v-else>
				<view class="prompt">
					<text>已邀请好友助力，中奖率增加</text>
				</view>
				<view class="content">
					<view class="my-self" style="background-color: #FFF;" v-for="(item,index) in helpDetails" :key="index">
						<image class="avatar" style="margin-left: 30rpx;" :src="item.avatar"></image>
						<view class="nickname">
							<text class="name">{{item.nickname}}</text>
						</view>
						<view class="info1" style="margin-right: 30rpx;">
							<text style="color: #999">{{item.add_time}}</text>
						</view>
					</view>
				</view>
			</view>

		</mescroll-uni>
		<!-- 	<view style="padding: 25rpx 0;position: fixed;bottom: 0;width: 100vw;">
			<button class="invite">邀请好友助力</button>
		</view> -->
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabIndex: 1,
				tabs: ['参与用户排行', '我的好友助力'],
				luckid: '', //抽奖ID 
				helpDetails: [],
				partInRanking: [], //排行
				rankinginfo: {
					count: 0,
					self: '',
				}, //排行信息
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中 ...",
					textNoMore: "-- 人家是有底线的 --",
				},
				downOption: {
					use: false
				}
			}
		},
		onLoad(option) {
			this.luckid = option.id
		},
		methods: {
			///lottery/helpDetails
			tabChange(index) {
				this.tabIndex = index;
				if (this.tabIndex == 1) {
					this.helpDetails = [];
				} else {
					this.partInRanking = [];
				}
				this.mescroll.resetUpScroll();
			},

			upCallback(page) {
				this.getinitdata(page.num).then(res => {
					console.log(res); 
					let datas=[];
					if(this.tabIndex==1){
						//设置列表数据
						if (page.num == 1) this.helpDetails = []; //如果是第一页需手动制空列表
						this.helpDetails = this.helpDetails.concat(res.helpDetails.data); //追加新数据
						datas= res.helpDetails.data;
					}else{
					
						this.rankinginfo = {
							count:res.partInRanking.count,
							self:res.partInRanking.self
						}
						//设置列表数据
						if (page.num == 1) this.partInRanking = []; //如果是第一页需手动制空列表
						this.partInRanking = this.partInRanking.concat(res.partInRanking.list); //追加新数据
						datas= res.partInRanking.list;
					}
					// console.log(res);
					this.mescroll.endSuccess(datas.length);
				}).catch(error => {
					console.log(error)
					this.$ShowMsg(error)
					this.mescroll.endErr()
				})
			},
			//获取列表数据
			getinitdata(pages) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/lottery/helpDetails',
						param: {
							id:this.luckid,
							page: pages,
							tabindex:this.tabIndex
						}
					}).then((res) => {
					//	console.log(res);
						if (res.status === 10000) {
							resolve(res.data)
						} else {
							this.$ShowMsg(res.message)
							this.mescroll.endErr();
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					});
				});

			},

		},
	};
</script>
<style lang="scss">
	uni-app {
		height: 100%;
		background-color: #F0F0F0;
	}

	text-gray {
		color: #6A6658;
	}

	/* 内容 */
	.content .head {
		background-color: #fff;
		font-size: small;
		display: flex;
		padding: 0 30rpx;
		display: flex;
		justify-items: space-between;
	}

	.content {
		flex-grow: 1;
	}

	/* 邀请好友 */
	.invite {
		height: 100rpx;
		text-align: center;
		border-radius: 100rpx;
		color: #fff;
		background-color: $uni-color-primary;
		margin: 0 30rpx;
	}

	/* 我自己的排行 */
	.my-self .info1 {
		font-size: small;
		display: flex;
		flex-direction: column;
	}

	.my-self .nickname .info {
		color: #6A6658;
	}

	.my-self .nickname .name {
		font-weight: bold;
	}

	.my-self .nickname {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		font-size: small;
	}

	.my-self .avatar {
		width: 90rpx;
		height: 90rpx;
		margin-right: 30rpx;
		border-radius: 100%;
	}

	.my-self .icon {
		margin: 0 30rpx;
		width: 32rpx;
		height: 32rpx;
		font-size: 28rpx;
	}
	.my-self .icontext{
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	
		margin: 0 30rpx;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9b9b9b;
	}
	.my-self {
		display: flex;
		align-items: center;
		padding: 22rpx 0;
	}

	/* 提示信息 */
	.prompt text {
		font-size: small;
		color: #7B7B7B;
	}

	.prompt {
		text-align: center;
		padding: 28rpx 0;
		background-color: #F1F1F1;
	}

	/* 头部信息css */
	.top-info .underscore {
		display: flex;
		justify-content: space-around;
	}

	.top-info .underscore view {
		visibility: hidden;
		height: 5rpx;
		background-color: #FCF3B2;
		width: 100rpx;
		margin: 10rpx 0;
		margin-bottom: 18rpx;
	}

	.top-info .underscore view.on {
		visibility: visible;
	}

	.top-info {
		background-color: #EA554F;
	}

	.top-info .info {
		display: flex;
	}

	.top-info .info text {
		flex-grow: 1;
		text-align: center;
		color: #FCF3B2;
		font-size: medium;
	}

	.top-info .info text.on {
		font-weight: bold;
	}
</style>
